<template>
  <div>
    <el-dialog
        v-model="showDialogFlag"
        :before-close="cancel"
        top="20px"
        width="30%" center>

      <el-form :model="editFormVal" :rules="rules" ref="formView" label-position="top" size="default">
        <el-form-item label="字典名称" prop="dictName">
          <el-input v-model="editFormVal.dictName"/>
        </el-form-item>
        <el-form-item label="字典类型" prop="dictType">
          <el-input v-model="editFormVal.dictType"/>
        </el-form-item>

        <el-form-item label="状态" prop="state">
          <el-radio-group v-model="editFormVal.state">
            <el-radio v-for="item in stateOptions" :label="item.dictValue">{{ item.dictLabel }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input :autosize="{ minRows: 2, maxRows: 4 }"
                    type="textarea" v-model="editFormVal.remark"/>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="subimt()" v-auths="['system-dict-type-update','system-dict-type-add']"
        >提交</el-button
        >
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {addDict, updateDict} from "/@/api/system/dict";
import {ElMessage, ElMessageBox} from 'element-plus';
import {onMounted} from "vue";


const showDialogFlag = ref(false)


const editFormVal = reactive({
  dictId: undefined,
  dictName: undefined,
  dictType: undefined,
  state: '0',
  remark: undefined
})

const rules = reactive({
  dictName: [
    {required: true, message: '请输入字典名称', trigger: 'blur'},
  ],
  dictType: [
    {required: true, message: '请输入字典类型', trigger: 'blur'},
  ],
})

const emits = defineEmits(['ok'])
const formView = ref()


// 打开弹窗
const openDialog = (formVal) => {
  if (formVal) {
    editFormVal.dictId = formVal.dictId
    editFormVal.dictName = formVal.dictName
    editFormVal.dictType = formVal.dictType
    editFormVal.state = formVal.state
    editFormVal.remark = formVal.remark
  }
  showDialogFlag.value = true;
}

const {proxy} = getCurrentInstance()
let stateOptions = ref([])
const queryOptions = () => {
  proxy.$dictOptions('sys_common_status').then(res => {
    stateOptions.value = res.data
  })
}

onBeforeMount(() => {
  queryOptions()
})


// 关闭窗口操作
const cancel = () => {
  editFormVal.dictId = undefined
  editFormVal.dictName = undefined
  editFormVal.dictType = undefined
  editFormVal.state = '0'
  editFormVal.remark = undefined
  formView.value.clearValidate()
  showDialogFlag.value = false
}
const subimt = async () => {
  await formView.value.validate((valid, fields) => {
    if (valid) {
      if (!editFormVal.dictId) {
        addDict(editFormVal).then(res => {
          ElMessage.success(res.msg)
          cancel()
          emits('ok')
        })
      } else {
        updateDict(editFormVal).then(res => {
          ElMessage.success(res.msg)
          cancel()
          emits('ok')
        })
      }
    }
  })
}

defineExpose({
  openDialog
})

</script>

<style scoped>

</style>
